<template>
	<view class="detail-collection">
		<template  v-if="menuCode == 'COMPANY_PRODUCT'">
		<view class="product-list fboxWrap">
			<view class="product-item bg-21242C" v-for="(item, index) in dataList" :key="index"
				@click="$pageTo('/Product?productId='+item.productId)">
				<view class="pic">
					<image class="inner" :src="item.thumbnailUrl" mode="aspectFill"></image>
					<!-- <view class="state font26 color-ACB4C7 fboxRow Ycenter Xcenter lh38">
						<template v-if="item.productStatus == 2">
							审核未通过：{{item.rejectReason}}
						</template>
						<template v-else>
							{{item.productStatus == 1 ? '已同意' : '待审核'}}
						</template>
					</view> -->
				</view>
				<view class="tit mt24 lh44 font30 font-ell1">{{item.productName}}</view>
				<view class="price font28 lh40 mt16">{{item.productPrice ? '￥'+item.productPrice : '面议'}}
				</view>
			</view>
		</view>
		</template>
		<view class="dynamic-list" v-else-if="menuCode == 'COMPANY_TRENDS'">
			<view v-for="(item, index) in dataList" :key="index">
				<DynamicCompany :inner-data="item" />
				<!-- <view class="line"></view> -->
			</view>
			<view v-if="loading =='list-not' || loading == 'loading' || loading == 'nomore'">
				<u-loadmore fontSize="24rpx" :status="loading" />
			</view>
		</view>
		<view class="recruit-list" v-else-if="menuCode == 'COMPANY_JOB_WANTED'">
			<view  v-for="(item, index) in dataList" :key="index">
				<RecruitmentItem :innerData="item" type="detailCollection" />
			</view>
			<view v-if="loading =='list-not' || loading == 'loading' || loading == 'nomore'">
				<u-loadmore fontSize="24rpx" :status="loading" />
			</view>
		</view>
		<!-- <template v-if="menuCode == 'COMPANY_OFFICIAL_WEBSITE' || menuCode == 'COMPANY_CASE'"> -->
		<template v-else>
			<template v-if="dataList.length">
			<view v-for="(item, index) in dataList" :key="index">
				<view class="line" v-if="index != 0"></view>
				<view class="card">
					<view class="hd fboxRow Ycenter font38 color-E8CDA7">
						<view class="flex1">{{item.moduleTitle}}</view>
						<!-- <view class="color-6B707C font26 lh38">更多</view> -->
					</view>
					<view class="bd font28">
						<view v-for="(sub, i) in item.content" :key="i">
							<view v-if="sub.type == 'text'" class="font30 mt32 color-ACB4C7 lh44"
								v-html="sub.segContent" style="white-space: pre-wrap;"></view>
							<view v-if="sub.type == 'image'">
								<image style="vertical-align: top;" class="max-pic" :src="sub.segContent" mode="widthFix"></image>
							</view>
							<view v-if="sub.type == 'video'" class="mt32">
								<video class="max-pic" :src="sub.segContent" :show-fullscreen-btn="false"></video>
							</view>
						</view>
					</view>
				</view>
			</view>
			</template>
		</template>
		<!-- <view v-if="loading =='list-not'">
			<NotEmpty :height="scrollHeight" />
		</view> -->
	</view>
</template>

<script>
	import {
		companyCardWebsite,
		companyProduct,
		companyDynamicList
	} from '@/api/card.js';
	import { companyJobOther } from '@/api/recruit.js';
	import RecruitmentItem from '@/components/card/recruitment-item.vue';
	import DynamicCompany from '@/components/circle/dynamic-company.vue';
	export default {
		components:{RecruitmentItem, DynamicCompany},
		props: {
			companyId: {
				type: String,
				defaul: ''
			},
			menuCode: {
				type: String,
				defaul: ''
			},
		},
		watch: {
			menuCode: {
				handler(val) {
					if (val) {
						this.getDetail()
					}
				},
				deep: true,
			}
		},
		data() {
			return {
				dataList: [],
				dataObj: {},
				current: 1,
				loading: 'loading',
				size: 10,
				count: 0,
				scrollHeight: 0
			}
		},
		mounted() {
			// console.log(this.company)
			if (this.companyId) {
				this.getDetail()
			}
		},
		methods: {
			getInit(){
				this.current= 1
				this.loading= 'loading'
				this.size= 10
				this.count= 0
				this.dataList = []
			},
			getDetail() {
				console.log(this.companyId, this.menuCode)
				this.scrollHeight =this.menuCode == 'COMPANY_OFFICIAL_WEBSITE' ? 200 : 500
				if (this.menuCode == 'COMPANY_PRODUCT') {
					companyProduct({
						id: this.companyId
					}).then(res => {
						this.dataList = res.data
						this.dataLoading(res)
					})
				} else if (this.menuCode == 'COMPANY_TRENDS') {
					this.getInit()
					this.dynamicList()
				} else if (this.menuCode == 'COMPANY_JOB_WANTED') {
					this.getInit()
					this.companyJobList()
				} else {
					if(this.menuCode){
						companyCardWebsite({
							companyId: this.companyId,
							menuCode: this.menuCode
						}).then(res => {
							res.data.filter(item => {
								item.content = JSON.parse(item.moduleContent)
							})
							this.dataList = res.data
							this.dataLoading(res)
						})
					}
				}
			},
			companyJobList(){
				companyJobOther({
					companyId: this.companyId,
					current: this.current,
					size: this.size
				}).then(res => {
					if(this.dataList.length){
						this.dataList = this.dataList.concat(res.data.list) 
					}else{
						this.dataList = res.data.list
					}
					this.listLoading(res)
				})
			},
			dynamicList() {
				companyDynamicList({
					companyId: this.companyId,
					current: this.current,
					size: this.size
				}).then(res => {
					if(this.dataList.length){
						this.dataList = this.dataList.concat(res.data.list) 
					}else{
						this.dataList = res.data.list
					}
					this.listLoading(res)
				})
			},
			dataLoading(res){
				if(res.data.length == 0){
					this.loading = 'list-not'
				}else{
					this.loading = 'nomore'
				}
			},
			listLoading(res){
				if(res.data.total == 0){
					this.loading = 'list-not'
				}else if(res.data.total < res.data.size || res.data.current * res.data.size >= res.data.total){
					this.loading = 'nomore'
				}
				this.count = res.data.total
			},
			listMore(){
				const {current, size, count, loading} = this
				if(loading == 'nomore' || loading == 'list-not' ){
					return
				}
				console.log(current*size , count)
				if(current*size < count){
					this.current = current + 1
					if (this.menuCode == 'COMPANY_TRENDS') {
						this.dynamicList()
					}
					if (this.menuCode == 'COMPANY_JOB_WANTED') {
						this.companyJobList()
					}
				}else{
					this.loading = 'nomore'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 40rpx;
	}
	.recruit-list{padding: 24rpx 40rpx;}

	.card .hd {
		line-height: 56rpx;
		font-weight: 700;
	}

	.card .hd .icon {
		margin-right: 7rpx;
		width: 40rpx;
		height: 32rpx;
	}

	.card .hd .icon-arrow {
		width: 12rpx;
		height: 20rpx;
	}

	.content {
		line-height: 42rpx;
	}

	.content /deep/ img {
		width: 630rpx;
		border-radius: 12rpx;
	}

	.video {
		width: 630rpx;
		height: 368rpx;
		border-radius: 12rpx;
		background-color: #f9f9f9;
	}

	.video .icon {
		width: 89rpx;
		height: 89rpx;
	}

	.max-pic {
		width: 670rpx;
		height: 352rpx;
		// border-radius: 12rpx
	}

	.line {
		margin: 0 auto;
		width: 670rpx;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}

	.product-list {
		padding: 0 0 0 40rpx;
	}

	.product-item {
		margin: 24rpx 22rpx 0 0;
		width: 324rpx;
		padding: 0 0 24rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.product-item .pic {
		position: relative;
		width: 324rpx;
		height: 324rpx;
	}

	.product-item .pic .inner {
		width: 324rpx;
		height: 324rpx;
	}

	.product-item .state {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 324rpx;
		height: 70rpx;
		background: rgba(20, 23, 32, 0.5);
	}

	.product-item .tit {
		padding: 0 24rpx;
	}

	.product-item .price {
		padding: 0 24rpx;
		color:#E45D48
	}

	.dynamic-list {padding: 0 32rpx;}

	// .dynamic-item {
	// 	padding: 32rpx 40rpx;
	// }

	// .dynamic-item .name {
	// 	font-weight: 500;
	// }

	// .dynamic-item .pic {
	// 	margin-right: 24rpx;
	// }

	// .dynamic-item .pic .inner {
	// 	width: 100rpx;
	// 	height: 100rpx;
	// 	border-radius: 12rpx;
	// }
</style>